<template>
   <div class="hello-wrap">
      <img
         alt="wallpaper"
         class="bg-img"
         :class="wallpaperState ? 'show' : ''"
         @load="wallpaperState = true"
         :src="wallpaperUrl"
         v-if="wallpaperUrl"
      />
      <div class="home-wrap flex full-height">
         <div class="home-body flex flex-col">

            <div class="flex">
               <div class="button" @click="languageChange('en')">{{ $t('language.en') }}</div>
               <div class="button margin-left" @click="languageChange('zhCN')">{{ $t('language.zhCN') }}</div>
            </div>

            <div class="home-item">{{ $t('homePage') }}</div>
            <div class="home-item">{{ $t('count') }}: {{ dataStore.count }}</div>

            <div class="flex">
               <n-button type="primary" round @click="addTap()">{{ $t('add') }}</n-button>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup>

// store
const dataStore = useDataStore()

// i18n
const {locale} = useI18n()

// model
const modelValue = defineModel({
   required: true,
})

// 语言切换
const languageChange = (val = LOCAL.DEFAULT) => {
   locale.value = val
   setStorage(LOCAL.KEY, val)
}

// 添加方法
const addTap = () => {
   modelValue.value = dataStore.count++
}

// 壁纸地址
const wallpaperUrl = ref("/demo.jpg")

// 加载完成
const wallpaperState = ref(false)

// 壁纸渲染
const initWallpaperRender = () => {
   getTodayWallpaper({}).then(res => {
      // console.log("res", res)
      const list = res?.data || [];
      if (list.length) {
         const index = getRandomNumber(0, list.length - 1)
         const wallpaper = list[index];
         console.log("wallpaper", wallpaper)

         //wallpaperUrl.value = `https://bing.com/${wallpaper.url}`
      }
   })
}

// onMounted
onMounted(() => {
   modelValue.value = dataStore.count
   initWallpaperRender();
})
</script>

<style lang="less" scoped>
.hello-wrap {
   position: relative;
   width: 100%;
   height: 100%;

   .bg-img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s, transform .25s, filter .25s;
      backface-visibility: hidden;
      transform: scale(1.1);

      &.show {
         opacity: 1;
      }
   }

   .home-wrap {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;

      .home-body {
         font-size: 30px;

         .home-item {
            height: 50px;
            line-height: 50px;
            text-align: center;
         }
      }
   }
}
</style>
